<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物业人员列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<blockquote class="layui-elem-quote list_search">
    <div class="layui-inline">
        <select id="status" name="status" style="height: 35px;border-radius: 3px;border-color: #b2b2b2" lay-verify="" lay-search>
            <option value="">-审核状态-</option>
            <option value="0">未审核</option>
            <option value="1">已审核</option>
        </select>
    </div>
    <div class="layui-inline">
        <input type="text" id="companyPlace" class="layui-input companyPlace"
               name="companyPlace" placeholder="请输入公司地址" value="">
    </div>
    <div class="layui-inline">
        <input type="text" id="company" class="layui-input company"
               name="company" placeholder="请输入公司名称" value="">
    </div>
    <a class="layui-btn search_btn" lay-submit="" data-type="search" lay-filter="search">查询</a>
    <div class="layui-inline">
        （支持模糊查询）
    </div>
</blockquote>
<table id="proList" class="proList" lay-filter="proList"></table>
<script type="text/html" id="barEdit">
    <a class="layui-btn layui-btn-xs" lay-event="plot">小区</a>
</script>
<script type="text/html" id="sratus">
    <input type="checkbox" name="id" value="{{d.id}}" title="审核通过" lay-filter="lockStatus" {{ d.status == 1 ?'checked' : '' }}>
</script>
<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['jquery','layer','laypage','laytpl','table','form'],function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            table = layui.table,
            form = layui.form;
        table.render({
            elem:'#proList',
            url:'/pro/list',
            title:'物业列表',
            page:true,
            limit:10,
            cols:[
                [
                    {type:'checkbox'},
                    {title:'ID',field:'id',width:50},
                    {title:'物业账户',field:'account'},
                    {title:'手机号码',field:'phone'},
                    {title:'物业公司',field:'company'},
                    {title:'公司地址',field:'companyPlace'},
                    {title:'邮箱',field:'email'},
                    {title:'审核状态',field:'status',templet:'#sratus'},
                    {title:'创建时间',field:'createTime'},
                    {title:'操作',templet:'#barEdit'}
                ]
            ],
            parseData:function(result){
                return {
                    code:result.code==200?0:result.code,
                    msg:result.message,
                    count:result.data.total,
                    data:result.data.list
                }
            }
        });

        //监听锁定事件
        form.on('checkbox(lockStatus)',function (data) {
            var id = data.elem.value;
            var status = data.elem.checked?1:0;
            $.ajax({
                url:'/pro/checkPro',
                data:{id:id,status:status},
                type:'put',
                dataType:'json',
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('更新成功',{icon:1,time:1000},function () {
                            table.reload('proList',{});
                        })
                    }else{
                        layui.msg('更新失败',{icon:5})
                    }
                }
            })
        })

        //动态查询
        $(".search_btn").click(function () {
            table.reload('proList',{
                url:'/pro/list',
                page:1,
                where:{
                    company:$("#company").val(),//物业
                    companyPlace:$('#companyPlace').val(),//小区位置
                    status:$('#status').val()//小区名称
                },
                parseData:function (result) {
                    return {
                        count:result.data.total,
                        msg:result.message,
                        data:result.data.list,
                        code:result.code==200?0:result.code
                    }
                }
            })

        });
        //监听表格的行工具事件
        table.on('tool(proList)',function (row) {
            var data = row.data;
            if (row.event === 'plot'){
                if (data.status == 0){
                    layer.msg("该账户未通过审核！",{icon:5})
                } else {
                    var index = layer.open({
                        type:2,
                        title:'小区列表',
                        content:'/pro/proPlot?proId='+data.id
                    });
                    //窗口大小发生改变的时候触发该事件
                    $(window).resize(function () {
                        layer.full(index);
                    });
                    layer.full(index);
                }
            }else if(row.event === 'del'){
                layer.confirm("确定删除吗？",function (index) {
                    $.ajax({
                        url:'/pro/delete',
                        type:'delete',
                        data:{'id':data.id},
                        dataType:'json',
                        success:function (result) {
                            if (result.code == 200){
                                layer.msg(result.message,{icon:1},function () {
                                    location.reload();//删除成功刷新页面
                                });
                            } else {
                                layer.msg(result.message,{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        })




    })
</script>

</body>
</html>